<template>
  <div class="rencent_comment">
    <ArticleTitle class="rencent_comment_title">
      <template v-slot:title>最近留言</template>
      <template v-slot:icon>
        <svg class="icon pinglun" aria-hidden="true">
          <use xlink:href="#icon-pinglun"></use>
        </svg>
      </template>
    </ArticleTitle>
    <ul>
      <li v-for="item in props.recentWord" :key="item.id">
        <div class="recent_comment_avatar">
          <img v-lazy="item.user.avatar" />
        </div>
        <div class="recent_comment_detail">
          <span>{{ item.user.name }}</span>
          <span>{{ formatUtcTime(item.createAt) }}</span>
          <span
            v-html="
              item.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, formatEmoji)
            "
          ></span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
  import ArticleTitle from '@/components/ArticleTitle.vue'
  import formatUtcTime from '@/utils/formatTime'
  import formatEmoji from '@/utils/formatEmoji'
  const props = defineProps({
    recentWord: Array,
  })
</script>

<style lang="less" scoped>
  .rencent_comment {
    position: relative;
    width: 100%;
    padding: 26px;
    margin: 25px 0;
    border-radius: 16px;
    background-color: var(--background-secondary);
    .rencent_comment_title {
      font-size: 20px;
      margin: 0;
      margin-bottom: 16px;
    }
    ul {
      li {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px 8px;
        margin-bottom: 6px;
        font-size: 12px;
        background-color: var(--background-primary);
        border-radius: 8px;
        .recent_comment_avatar {
          width: 36px;
          height: 36px;
          margin-right: 8px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 0.8s;
            &:hover {
              transform: rotate(1turn);
            }
          }
        }
        .recent_comment_detail {
          flex: 1;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          span {
            &:nth-of-type(1) {
              font-size: 14px;
              font-weight: 700;
              color: var(--text-accent);
            }
            &:nth-of-type(2) {
              margin: 3px 0;
              --tw-text-opacity: 1;
              color: rgba(107, 114, 128, var(--tw-text-opacity));
            }
            &:nth-of-type(3) {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              color: var(--text-bright);
            }
          }
        }
      }
    }
  }
</style>
